<template>
  <div>
    <!-- 产品管理弹窗 -->
    <t-dialog :visible.sync="visible" :width="750" :footer="false" :closeBtn="false">
      <div slot="header">{{ title }}</div>
      <div slot="body">
        <t-divider :style="{ marginTop: '1px' }"></t-divider>
        <!-- 表单内容 -->
        <t-form :data="formDataPlan" ref="form" :rules="rules" @submit="commit" :labelWidth="100">
          <t-form-item label="测试计划名称" name="testplan_name">
            <t-input :style="{ width: '480px' }" v-model="formDataPlan.testplan_name" placeholder="请输入测试计划名称"></t-input>         
          </t-form-item>
          <t-form-item label="定时任务" name="cron_state">
            <t-switch size="large" v-model="formDataPlan.cron_state" :label="['开启', '关闭']" @change="changeCronState" :customValue='[1, 0]'></t-switch>
          </t-form-item>
          <!-- 穿梭框 -->
          <t-form-item label="测试用例" name="testcase_ids">
            <t-transfer
              :data="list"
              :v-model="internalValue"
              :checked.sync="checked"
              @change="onChange"
              @checked-change="handleCheckedChange"
              :onPageChange="handlePageChange"
              :pagination="pagination"
              :targetDraggable="true"
              targetSort="push"
              :search="true"
              :style="{width:'600px' }"
            >
            </t-transfer>
          </t-form-item>
          <t-form-item style="float: right">
            <t-button variant="outline" @click="onCancel" :style="{ marginRight: '10px' }">取消</t-button>
            <t-button theme="primary" type="submit">确定</t-button>
          </t-form-item>
        </t-form>
      </div>
    </t-dialog>
  </div>
</template>

<script>
// import ListFilter from "../../../list/filter/index";
export default {
  name: 'PlanDialog',
  // components: {ListFilter},
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
    title: {
      type: String,
      required: true,
    },
    targetValue: {
      type: Array,
      default: () => [], // 设置默认值为空数组
    },

  },
  data() {
    return {
      rules: {
        // 表单验证规则
      },
      slotChecked: '',
      // visible: this.visible,
      list: [],
      pagination: [
        {
          pageSize: 5,
          defaultCurrent: 1,
        },
      ],
      // targetValue: [],
      internalValue: this.targetValue,
      checked: ["2"],
      formDataPlan: { ...this.formData }, // 将父组件传递的数据赋值给formDataAddHost
    };
  },
  watch: {
    visible(newVal) {
      this.visible = newVal;
    },
    formData(newVal) {
      this.formDataPlan = { ...newVal }; // 监听父组件传递的数据变化，并更新formDataAddHost
    },
  },
  mounted() {
    // this.visible = this.visible;
    this.formDataPlan = { ...this.formData };
    this.internalValue = [...this.formDataPlan.testcase_ids];
    this.loadTestCases();
  },
  methods: {
    loadTestCases() {
      this.$request
        .get('/api/query/testcase_list')
        .then((res) => {
          console.log("测试用例数据~~~~~", res.data)
          if (res.data.code === '000') {
            const transformedData = res.data.data.map((item) => ({
              value: item.testcase_id,
              label: item.testcase_name,
            }));
            this.list = transformedData;
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.dataLoading = false;
        });
    },
    handleCheckedChange({ checked, sourceChecked, targetChecked, type }) {
      console.log("handleCheckedChange", {
        checked,
        sourceChecked,
        targetChecked,
        type,
      });
      console.log(this.internalValue, "targetValue");
    },
    onChange(newTargetValue) {
      console.log(newTargetValue);
      this.selectedTestCases = newTargetValue;
    },
    handlePageChange(...args) {
      console.log('handlePageChange', args);
    },
    commit() {
      console.log("this.formDataPlan~~~~~~",this.formDataPlan)
      let params = {};
      if (this.formDataPlan.id) {
        // 存在 id 字段，表示修改数据
        params = {
          testplan_name: this.formDataPlan.testplan_name,
          cron_state: this.formDataPlan.cron_state,
          testcase_ids: this.internalValue,
          id: this.formDataPlan.id
        };
      } else {
        // 不存在 id 字段，表示注册新数据
        this.$message.warning("测试计划id不存在");
      }
      console.log('编辑测试计划提交的信息:', params);

      this.$request
        .post('/api/edit/testplan', params)
        .then((res) => {
          this.$message.success('提交成功');
          // 关闭弹窗
          this.$emit('cancel');
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onCancel() {
      // 处理弹窗取消事件
      this.$emit('cancel'); // 触发 cancel 事件
    },
    changeCronState(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped>
/* 样式内容 */
</style>
